﻿
<div class="breadcrumbs">
    <div class="container">
        <h1 class="pull-left blogtitle">Blog Medium</h1>
        <ul class="pull-right breadcrumb">
            <li><a href="/home/index">首页</a></li>
            <li class="active blogtitle">Blog list</li>
        </ul>
    </div>
</div><!--/breadcrumbs-->

<div class="container content">
    <div class="row blog-page">
        <div class="col-md-3">
            <!-- Social Icons -->
            <div class="magazine-sb-social margin-bottom-20">
                <div class="headline headline-md"><h2>获签公告</h2></div>
                <div align="center" id="demo" class="tab-v2 tab-content">
                    <div id="demo1" style="text-align:left">
                    </div>
                    <div id="demo2" style="text-align:left"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <!-- End Social Icons -->
            <!-- Posts -->
            <div class="posts margin-bottom-40" id="recentPost">
                <div class="headline headline-md"><h2>最新消息</h2></div>
                
            </div><!--/posts-->
            <div class="tab-v2 margin-bottom-40">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#home-1">联系我们</a></li>
                </ul>
                <div class="tab-content">
                    <div id="home-1" class="tab-pane active">
                        <i class="fa fa-home" aria-hidden="true"><p style="display: inline-block;">&nbsp; 123 Rd, Suburb City Country 1234</p></i><br>
                        <i class="fa fa-envelope" aria-hidden="true"><p style="display: inline-block;">&nbsp; Example@email.com</p></i><br>
                        <i class="fa fa-phone" aria-hidden="true"><p style="display: inline-block;">&nbsp; 123456789</p></i><br>
                        <i class="fa fa-globe" aria-hidden="true"><p style="display: inline-block;">&nbsp; www.example.com</p></i>
                    </div>
                </div>
            </div>
            <!-- End Tabs Widget -->
        </div>
        <div class="col-md-9 md-margin-bottom-40">
            <div id="list"></div>


            <div class="text-center">
                <div class="pagination" id="page">
                </div>
            </div>
        </div>

    </div><!--/row-->
</div><!--/container-->
<input type="hidden" id="currpage" value="1" />
@section scripts{
    <script src="~/assets/plugins/bootstrap/bootstrap-page.js"></script>
    <script>
        $(function () {
            if (sessionStorage.getItem("bloglist")) {
                $(".blogtitle").html(sessionStorage.getItem("bloglist"))
            } else {
                window.location.href = "/home/index";
            }
            var currentPage = 1;
            var pageCount = @ViewBag.pageCount;

            var options = {
                bootstrapMajorVersion: 2, //版本
                currentPage: currentPage, //当前页数
                totalPages: pageCount, //总页数
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "First";
                        case "prev":
                            return "Pre";
                        case "next":
                            return "Next";
                        case "last":
                            return "Last";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (event, originalEvent, type, page) {
                    $("#currpage").val(page);
                    loadData();

                }
            };

            $('#page').bootstrapPaginator(options);
            $("#page ul").addClass("pagination");
        })
        loadData();
        function loadData() {
            $.post('/data/selectnews',{categoryId:@ViewBag.CategoryId,pageIndex:$("#currpage").val(),pageSize:@ViewBag.pageSize},function(data){
                if(data){
                    $("#list").html("");
                    for(var key in data){
                        console.log(data[key])
                        var html = ' <div class="row blog blog-medium margin-bottom-40">'
                        +'<div class="col-md-5">'
                            +'<div class="embed-responsive embed-responsive-16by9">'
                                +'<img class="img-responsive" src="'+data[key].ImgUrl+'" alt="">'
                            +'</div>'
                        +'</div>'
                        +'<div class="col-md-7">'
                            +'<h2><a style="text-decoration:none;" href="/news/detail/'+data[key].NewId+'">'+data[key].Title+'</a></h2>'
                            +'<ul class="list-unstyled list-inline blog-info">'
                               +' <li><i class="fa fa-calendar"></i>'+formatTime(data[key].PublishTime)+'</li>'
                               +' <li><i class="fa fa-tags"></i>'+data[key].Tag+'</li>'
                           +' </ul>'
                            +'<p></p>'
                           +' <p><a class="btn-u btn-u-sm" href="/news/detail/'+data[key].NewId+'">Read More <i class="fa fa-angle-double-right margin-left-5"></i></a></p>'
                        +'</div>'
                   +' </div>';

                        $("#list").append(html);
                    }
                    $("#page ul").addClass("pagination");
                }
            })

            $.post('/data/SelectAllNews',{pageIndex:1,pageSize:3},function(data){
                if(data){
                    var recentPost = [];
                    for(var key in data){
                        var html = ' <dl class="dl-horizontal">'
                    +'<dt><a href="/news/detail/'+data[key].NewId+'"><img src="'+data[key].ImgUrl+'" alt="" /></a></dt>'
                    +'<dd>'
                       +' <p><a href="/news/detail/'+data[key].NewId+'">'+data[key].Title+'</a></p>'
                    +'</dd>'
                +'</dl>';
                        recentPost.push(html)
                    }
                    $("#recentPost").append(recentPost)

                }
            })
        }
        function formatTime(value) {

            if (value == undefined) {
                return "";
            }
            if (value.length == 0) return "";

            var d = eval('new ' + value.substr(1, value.length - 2));
            var ar_date =[d.getFullYear(), d.getMonth() + 1, d.getDate()];
            for (var i = 0; i < ar_date.length; i++) ar_date[i] = dFormat(ar_date[i]);
            return ar_date.join("-");
            //return ar_date.join("-")+" "+d.getHours()+":"+d.getMinutes();
            function dFormat(i) { return i < 10 ? "0" + i.toString() : i; }
        }

        loadScroll();
        function loadScroll(){
            $.post('/data/selectconfig',{configkey:'scrolly'},function(data){

                if(data){
                    var html=[];
                    for(var key in data){
                        html.push(data[key].Title+'<br>')
                    }

                    $("#demo1").html(html.join(''))
                    scrollgo();
                }
            })
        }


        function scrollgo(){

            var demo = document.getElementById("demo");
            var demo1 = document.getElementById("demo1");
            var demo2 = document.getElementById("demo2");
            var speed=50;    //数值越大滚动速度越慢
            demo2.innerHTML = demo1.innerHTML;
            demo.scrollTop = demo.scrollHeight+'px';

            function Marquee(){
                var i =demo.scrollTop;
                demo.scrollTop++;
                //向下的无缝循环滚动
                if(demo2.offsetTop-demo.scrollTop<=0 || i ==  demo.scrollTop)    //当滚动至demo1与demo2交界时
                {
                    demo.scrollTop-=demo1.offsetHeight;    //demo跳到最顶端
                }
                //else{
                //    demo.scrollTop++;
                //}
            }
            var MyMar = setInterval(Marquee,speed);
            demo.onmouseover = function(){clearInterval(MyMar)}
            demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
        }



    </script>
}